<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="search-form" v-if="pageData.headerShow">
                <a-form size="mini" :model="pageData" layout="inline">
                    <a-form-item label="所属公司">
                        <a-input class="bacClass" placeholder="" v-model.trim="searchData.company" disabled='true'/>
                        <a-input class="bacClass" placeholder="" v-model.trim="searchData.companyId" v-show='false' />
                    </a-form-item>
                    <a-form-item label="所属部门">
                        <a-cascader v-model="searchData.departmentId" :options="pageData.departmentList" allow-clear
                            :class="bacClass" :title="pageData.title1"  popup-container="html" />
                    </a-form-item>
                </a-form>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="pageData.headerShow" @click="pageData.headerShow = false" :strokeWidth="2"
                        :size="18" />
                    <icon-double-down v-else @click="pageData.headerShow = true" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <div class="my-tool-bar">
                <Toolbar :items="['查询',  '导出']" @select="queryDyeReport"
                 @export="exportReport" >
                </Toolbar>
            </div>
        </template>
        <template #pageTabel>
              <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" @grid-ready="gridReady" style="height:93%;"
                class='ag-theme-alpine' :defaultColDef="defaultColDef" :rowData="tableDataList" :columnDefs="columnDefs"
               :suppressDragLeaveHidesColumns="true" :localeText="localeTextData" :gridOptions="gridOptions">
            </AgGridVuesCopys>
        </template>

    </PageTabelLayout>
</template>


<script lang="ts">
import { onMounted, reactive, ref } from 'vue';
import Toolbar from '@/components/Toolbar.vue';
import { post,get } from '@/api/http'
import filedownload from 'js-file-download'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import PageTabelLayout from "@/components/pageTabelLayout.vue";
import { slicing } from '@/utils/caseFrimAndSecRig'

const localeTextData: any = ref(localeText);
const headerShow = ref<boolean>(true)


interface FirmEntity {
    firm: string,
    firmId: string,
}


export default {

    setup() {

        let searchData = reactive({
            company: '',
            companyId: '',
            departmentId: null
        });


        const pageData = reactive<{
            showAdd: boolean,
            sideTitle: string,
            departmentList: any[],
            pageLoading: boolean,
            headerShow: boolean
        }>({
            showAdd: false,
            sideTitle: "",
            departmentList: [],
            pageLoading: false,
            headerShow: true
        })



        const defaultColDef = {
            sortable: true,
            resizable: true,
            filter: true,
        }

        const columnDefs = [
            {
                showRowGroup: 'hide_def',
                "headerName": "",
                "checkboxSelection": true,
                "headerCheckboxSelection": true,
                "pinned": "left",
                "width": 50,
                resizable: false,
                filter: false,
                sortable: false,
                minWidth: 50,
                maxWidth: 50,
                lockPosition: "left",
            },
            { headerName: '部门', field: 'departmentName',width: 120},
            { headerName: '总月产量',field: 'monthlyOutput',width: 120},
            { headerName: '用水（单位：吨）' ,
                children: [
                   { headerName: '用水量', field: 'waterCount'},
                   { headerName: '吨布用水量', field: 'waterCountPerTon'},
                   { headerName: '热水回收到水处理', field: 'cyclicWaterCount' },
                   { headerName: '减回收到水处理后吨布耗水量', field: 'noCyclicWaterCountPerTon' },
                   { headerName: '前处理用水量', field: 'preDealWaterCount' }
                ]
            },
            { headerName: '用电（单位：度）',
                children: [
                   { headerName: '用电量', field: 'electrCount' },
                   { headerName: '吨布用电量', field: 'electrCountPerTon' },
                   { headerName: '前处理用电量', field: 'preDealElectrCount' }
                ]
            },
            { headerName: '低压蒸汽（单位：立方米）',
                children: [
                   { headerName: '用汽量', field: 'lowVoltSteamCount' },
                   { headerName: '吨布用汽量', field: 'lowVoltSteamCountPerTon' },
                   { headerName: '前处理用汽', field: 'preDealLowVoltSteamCount' }
                ]
            },
            { headerName: '记录时间',field: 'createTime',width: 150},
        ]


        let tableDataList = ref([]);
        let gridOptions = ref();


        onMounted(() => {
            initData();
        })

        const  initData = () => {
            post({
                url: 'ems/common/fetchUserInfoByToken',
                async: false,
                data: { }
            }).then(({ code, message, data }) => {
                if (code === 200) {
                    searchData.company = data.firmName;
                    searchData.companyId = data.firmId;
                    findDepartmentList(data.firmId);
                }else {
                     Message.error({
                         content: message,
                         duration: 5000,
                     });
                }
            })
        }


        // 公司下拉框 改变
        const findDepartmentList = (param) => {
            post({
                url: 'org/baCompany/getDepartmentTree?companyId=' + param,
            }).then((result) => {
                if (result.code === 200) {
                    pageData.departmentList = result.data
                }
            })
        };


        const gridReady = (params: any) => {
            gridOptions = params.api;
        }

        const  queryDyeReport = () => {
            post({
                url: 'ems/energyReport/findMonthlyDyeClothReport',
                data: {companyId: searchData.companyId,departmentId: searchData.departmentId }
            }).then(({ data, code }: any) => {
                if (code === 200) {
                    gridOptions.setRowData(data);
                    tableDataList.value = data;
                }
            });
        }



        const  exportReport = () =>{
            post({
                url: 'ems/energyReport/exportMonthlyDyeClothReport',
                data: {companyId: searchData.companyId,departmentId: searchData.departmentId },
                responseType: 'blob'
            }).then((res) => {
                filedownload(res, '能耗报告.xlsx')
            });

        }



        return {
            headerShow,
            columnDefs,
            initData,
            queryDyeReport,
            exportReport,
            tableDataList,
            defaultColDef,
            gridOptions,
            gridReady,
            pageData,
            searchData,
            localeTextData
        };
    },

    components: { PageTabelLayout, }

};
</script>

<style scoped lang="less">
:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}</style>
